<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">

    <title>Test ColorSelector - Metro 4 :: Popular HTML, CSS and JS library</title>
    <style>
        .target {
            height: 100px;
            width: 306px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid gray;
            margin-top: 10px;
        }
    </style>
</head>
<body class="m4-cloak h-vh-100">

<div class="container h-100 d-flex flex-column flex-justify-start flex-align-center">

    <div class="mt-10 mb-10">
        <button class="button" onclick="Metro.getPlugin('#color-selector-1', 'color-selector').val('#aa00ff')">Set to Violet</button>
        <button class="button" onclick="alert(Metro.getPlugin('#color-selector-1', 'color-selector').val())">Get color</button>
        <button class="button" onclick="Metro.getPlugin('#color-selector-1', 'color-selector').user('#aa00ff, #ff00ff')">Set user colors</button>
        <button class="button" onclick="alert(Metro.getPlugin('#color-selector-1', 'color-selector').user().join(','))">Get user colors</button>
        <button class="button" onclick="createMaterialPalette()">Create material colors</button>
    </div>

    <div class="mb-10">
        <input type="text" data-role="input" id="color-controller">
    </div>

    <div id="color-selector-1"
         data-role="color-selector"
         data-user-colors="#FFFFFF,#000000,#FFFB0D,#0532FF,#FF9300,#00F91A,#FF2700,#686868,#EE5464,#D27AEE,#5BA8C4,#E64AA9,#1ba1e2,#6a00ff,#bebebe,#f8f8f8"
         data-show-as-string="rgb"
         data-show-alpha-channel="true"
         data-controller="#color-controller"
         data-init-color="#9c27b0"
         data-readonly-input="false"
         class="win-shadow"></div>

    <div class="mt-20 w-100">
        <div class="row">
            <div class="cell-md-12">
                <div id="palette"></div>
            </div>
            <div class="cell-md-3">
                <div id="grayscale"></div>
            </div>
            <div class="cell-md-3">
                <div id="saturate"></div>
            </div>
            <div class="cell-md-3">
                <div id="desaturate"></div>
            </div>
        </div>
    </div>
</div>

<script src="../metro/js/metro.js?ver=@@b-version"></script>
<script>
    function createMaterialPalette(){
        var color = Metro.getPlugin('@color-selector', 'color-selector').val();
        var palette = Metro.colors.createScheme(color, "material");
        var outputPalette = $("#palette").clear();

        $.each(palette, function(key, color){
            outputPalette.append($("<div style='height: 50px'>").addClass("text-center p-1").css("background-color", color).text(key + " : " + color));
        })
    }

    $(function(){
        createMaterialPalette();
        // var outputPalette = $("#palette").clear();
        // var colors = Metro.colors.tetradic("#f44336");
        //
        // $.each(colors, function(){
        //     outputPalette.append($("<div style='height: 50px'>").addClass("text-center p-1").css("background-color", this).text(this));
        // })
    })
</script>
</body>
</html>
